<template>
  <div>
    <div class="recommend-city" @mouseleave="leaveSidebar">
      <div
        class="city"
        @mouseenter="handleSidebar(index)"
        v-for="(city, index) in cityList"
        :key="index"
      >
        <div>{{ city.type }}</div>
        <span class="el-icon-arrow-right"></span>
      </div>
      <div class="sidebar" v-if="isShow">
        <div
          class="sidebar-list"
          v-for="(item, i) in this.listChildren"
          :key="i"
          @click="toSearch(i)"
        >
          <span class="num">{{ i + 1 }}</span>
          <span class="citys">{{ item.city }}</span>
          <span class="title">{{ item.desc }}</span>
        </div>
      </div>
    </div>
    <div class="cityImg">
      <h4>推荐城市</h4>
      <a href="#">
        <img
          src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602129685243&di=2a21e342a73ec10271cc366cfd582c48&imgtype=0&src=http%3A%2F%2F1863.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2010%2F11%2F10%2F21%2F10%2Fu123039466_12cec37115dg215.jpg"
          alt
        />
      </a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityList: [],
      listChildren: [],
      isShow: false,
    };
  },
  mounted() {
    this.$axios({
      url: "/posts/cities",
      method: "get",
    }).then((res) => {
      this.cityList = res.data.data;
      console.log(this.cityList);
    });
  },
  methods: {
    toSearch(i) {
      this.$emit("getData", this.listChildren[i].city);
      // console.log(this.listChildren[i].city);
      this.isShow = false;
    },
    handleSidebar(index) {
      // 鼠标移入显示
      this.isShow = true;
      this.listChildren = this.cityList[index].children;
      
      // console.log(this.listChildren);
    },
    leaveSidebar() {
      // 鼠标离开隐藏
      this.isShow = false;
    },
  },
};
</script>

<style lang='less' scoped>
.recommend-city {
  border-bottom: 1px solid #dddddd;
  
  .city:hover {
    color: #ffa500;
    cursor: pointer;
    border-right-color: #fff;
  }
  .city {
    padding: 8px 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #dddddd;
    border-bottom: none;
    div {
      font-size: 14px;
      // color: #333;
      padding: 0 20px;
    }
    span {
      width: 30px;
      display: flex;
      justify-content: flex-end;
      font-size: 24px;
      color: #999;
    
    }
  }
  .sidebar {
    position: absolute;
    border: 1px solid #dddddd;
    border-left: none;
    width: 350px;
    right: 390px;
    background: #ffffff;
    z-index: 10;
    top: 0;
    .sidebar-list {
      cursor: pointer;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: space-around;
      padding: 4.5px 3px;
      font-size: 14px;
      .num {
        color: #ffa500;
        font-size: 24px;
        padding: 0 15px;
      }
      .citys {
        color: #ffa500;

        padding: 0 15px;
      }
      .title {
        color: #999999;
        flex: 1;
        text-align: left;
      }
      &:last-child {
        border-left: 1px solid #ddd;
      }
    }
  }
}
.cityImg {
  width: 260px;
  margin-top: 20px;
  h4 {
    font-weight: 400;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10p;
  }
  img {
    width: 100%;
    display: block;
    object-fit: cover;
  }
}
</style>